<template>
  <div class="wrap">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo top"
      @open="handleOpen"
      @close="handleClose">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>邻居成员</span>
        </template>
            <el-menu-item-group title="分组1">
                <el-menu-item class="ddd" :index="'1-'+item" v-for="item in member" @click="handleDetail(item)">
                    <template slot="title">{{item}}</template>
                    <p v-show="!item">该顾客没有发表过博客</p>
                </el-menu-item>
            </el-menu-item-group>


    </el-submenu>
<el-submenu index="2">
    <span slot="title">板块分类</span>
                <el-submenu class="ddd" v-for="(value,key) in groups" :key="key" :index="'submenu-'+key" >
                  <template slot="title">{{key}}</template>
                  <li v-for="item in value" :index="'11-'+item" class="classify" @click="handleClasify(item.id)" >{{item.title}}</li>
                </el-submenu>
</el-submenu>


<el-menu-item index="3">
    <i class="el-icon-menu"></i>
    <span slot="title">最近更新</span>
</el-menu-item>
<el-menu-item index="4" disabled>
    <i class="el-icon-document"></i>
    <span slot="title">文章归档</span>
</el-menu-item>


</el-menu>
</div>
</template>

<script>
    export default {
        props: {
            groups: Object
        },
        name: "nav.vue",
        data() {
            return {
                value: new Date(),
                member:[],
                currentPage: 1,
                total: 0,
                pageSize: 5,
                art:[]
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClasify(e) {
                console.log(e) 
                 this.$router.push("/blog/"+e).catch(err => err)
            },
            init() {
                const _this = this
                this.$axios.get("/user/member").then(res => {
                    _this.member = res.data.data
                })
                 },
                handleDetail (e) {
                    var person=this.$store.getters.getUser
                    person.username = e
                    console.log(person)
                    this.$store.commit("SET_USERINFO", person)
                    this.$router.push("/Detail")
                }
                
           
        },



        mounted() {
            this.init()
        }
    }
</script>

<style scoped>
    .top {
        margin-top: 100px;
    }
    >>>.classify {
        
        height: 40px;
        line-height: 40px;
        padding: 5px;
        border: 1px solid #000;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }
    
    .ddd {
        overflow: hidden
    }
</style>